<template>

  <div class="moni">

    <el-container>

      <utabbar :tabactiv="5"></utabbar>
    </el-container>

    <el-main>
      <div class="el-form">
        <el-form :model="form" class="demo-form-inline">
          高考成绩：<el-input v-model="form.chengji" placeholder="成绩"></el-input>
          选课：<el-select v-model="form.suject1" placeholder="选课">
            <el-option label="物理" value="物理"></el-option>
            <el-option label="地理" value="地理"></el-option>
            <el-option label="化学" value="化学"></el-option>
            <el-option label="生物" value="生物"></el-option>
            <el-option label="政治" value="政治"></el-option>
            <el-option label="历史" value="历史"></el-option>
          </el-select>
          <el-select class=".sl" v-model="form.suject2" placeholder="选课">
            <el-option label="物理" value="物理"></el-option>
            <el-option label="地理" value="地理"></el-option>
            <el-option label="化学" value="化学"></el-option>
            <el-option label="生物" value="生物"></el-option>
            <el-option label="政治" value="政治"></el-option>
            <el-option label="历史" value="历史"></el-option>
          </el-select>
          <el-select v-model="form.suject3" placeholder="选课">
            <el-option label="物理" value="物理"></el-option>
            <el-option label="地理" value="地理"></el-option>
            <el-option label="化学" value="化学"></el-option>
            <el-option label="生物" value="生物"></el-option>
            <el-option label="政治" value="政治"></el-option>
            <el-option label="历史" value="历史"></el-option>
          </el-select>
          <el-form-item>
            <el-button type="primary" @click.prevent="onSubmit">查询</el-button>
            <el-button type="primary" @click.prevent="onSubmit">换一批</el-button>

          </el-form-item>
        </el-form>
      </div>
      <div class="mainfoot">
        <div class="tiao"></div>
        <div class="biaoti">
          推荐院校
        </div>
        <el-table v-loading="loading" element-loading-text="拼命加载中" :data="tableData" style="width: 100% ">
          <el-table-column prop="imgCode" label="院校图标" width="160" align="center" header-align="center">
            <template v-slot="scope">
              <img :src="scope.row.imgCode" alt="" class="imgCode">
            </template>
          </el-table-column>
          <el-table-column prop="schoolCode" label="院校代号" width="170" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="schoolName" label="院校名称" width="180" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="schoolType" label="办学类型" width="140" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="professionalName" label="专业类型" width="180" align="center" header-align="center">
          </el-table-column>
          <el-table-column prop="electiveSubjectRequirements" label="选课类型" width="160" align="center"
            header-align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">填报</el-button>

            </template>
          </el-table-column>

        </el-table>
      </div>
    </el-main>

  </div>

</template>
<script>
import axios from 'axios';
import Vue from "vue";
import Fcee_url from "../js/fceeConfig";
import tabbar from "./fceecomponents/my-tabbar.vue"
import utabbar from "./fceecomponents/uitabbar.vue"
import tool from './tool/tool';
import erro from "./erro.vue"
Vue.prototype.$Fcee_url = Fcee_url
export default {
  components: {
    tabbar,
    utabbar
  },
  data() {
    return {
      form: {
        chengji: '',
        suject1: '',
        suject2: '',
        suject3: ''
      },
      tableData: '',
      UserInfo_url: '',
      UserName: '',
      url1: "",
      loading: false,


    }
  },
  methods: {

    handleClick(row) {
      console.log(row.schoolCode);
      // alert(row.schoolCode)
      // alert(row.schoolName)
      var url = "/Volunteer/AddVolunteer?VolunteerColleges=" + row.schoolCode + "&Volunteering=" + row.professionalCode + "&schoolName=" + row.schoolName + "&professionalName=" + row.professionalName;
      // var data ={
      //   "VolunteerColleges":row.schoolCode,
      //   "Volunteering":row.professionalCode,
      //   "schoolName":row.schoolName,
      //   "professionalName":row.professionalName
      // }


      tool.$request("POST", url).then(res => {
        // alert(res.msg)
        if (res.code == 0) {
          this.$message({
            message: '填报成功请前往我的志愿查看',
            type: 'success'
          });
        }


      }
      )
    },
    gohome() {
      this.$router.replace("/");

    },
    tiaotiao() {
      this.$router.replace("/yonghu");

    },
    getone() {
      this.$router.replace("/moni");

    },
    gettwo() {
      this.$router.replace("/zhuanjia");

    },
    getthree() {
      this.$router.replace("/zhuanye");

    },
    // info: function () {
    //   axios({
    //     method: "GET",
    //     url: this.$Fcee_url.url + "/userInfo",

    //   }).then(response => {
    //     this.UserInfo = response.data.data;
    //     // console.log(response)
    //     // console.log("结果为" + this.UserInfo);
    //     // console.log(this.UserInfo.username);
    //     this.UserName = this.UserInfo.username;
    //     this.UserInfo_url = "http://localhost:8989" + this.UserInfo.Avatar;
    //     // console.log("处理后" + this.UserInfo_url)

    //   })
    // },
    open() {
      this.$confirm('此功能需要登录使用, 是否继续?', '提示', {
        confirmButtonText: '登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       this.$router.replace('/yonghu')
        this.$message({
          type: 'success',
          message: '即将前往登录界面!',

        });
      }).catch(() => {
        this.$router.replace('/')
        this.$message({
          type: 'info',
          message: '取消'
        });          
      });
    },
    getLogin: function () {
      // alert("测试")
      axios({
        method: "GET",
        url: "/userInfo",

      }).then(response => {
        // this.UserInfo = response.data.data;
        console.log(response)
        // alert(response.data.code)
        if(response.data.code==1){
          console.log("已登录")
          // alert("未登录")
          this.open()

        }else{
          // this.open4();
          // alert("未登录")
          this.$message({
          showClose: true,
          message: '用户已登录',
          type: 'success'
        });

        }

      })
    },



    onSubmit() {

      //  this.url1 =

      this.loading = true

      axios({
        method: "GET",

        url: "/Volunteer/fillIn" + "?Score=" + this.form.chengji + "&suject=" + this.form.suject1 + "&suject=" + this.form.suject2 + "&suject=" + this.form.suject3,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }


      }).then(response => {
        this.tableData = response.data.data
        console.log(response.data.data);
        this.loading = false
      })
    }
  },

  created() {
    // this.info();
    // tool.$getLogin()
    this.getLogin()

  }
}
</script>
<style >
* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
}


.el-table {
  height: 90vh;
}

.moni {
  width: 100%;
  height: 100%;
  /* padding-left: 5%;
  padding-right: 5%; */
  background-color: #ffffff;
  margin: 0 auto;
}

/* .el-header,
.el-footer {
  background-color: white;
  color: #333;
  text-align: center;

  line-height: 60px;
}

.el-header {
  border-radius: 15px;
  margin-bottom: 30px;
} */

.sl {
  height: 100%;
  z-index: 999;
}

/*下拉框最后一个显示不完全*/
.el-select-dropdown__wrap.el-scrollbar__wrap {
  margin-bottom: 0 !important;
}

.el-main {
  /* margin-top: rem; */
  height: 100%;
  color: #333;
  text-align: center;
  padding: 0;
  /* margin-bottom: 30px; */
  overflow: hidden
}

.maintop {
  margin-top: 1rem;
  background-color: white;
  height: 180px;
  /* margin-bottom: 30px; */

}

@media screen and(max-width:700px) {
  .el-form {
    position: relative;
    top: 0.2rem;
  }

}

.el-input {
  width: 200px;
  /* margin-left: 5px; */
  margin-top: 50px;
}

/* .mainfoot{
    background-color: white;
    width: 100%;
    /* height: 500px; */
/* }  */
/* .tiao{
    width: 5px;
    height: 30px;
    float: left;
    background-color: aqua;
}
.biaoti{
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    float: left;
}
.mingcheng1{
  font-size: 20px;
  font-weight: bolder;
  color: aqua;
}
.mingcheng2{
  font-size: 20px;
  color: rgb(128, 128, 128);
  font-weight: bolder;
} */
</style>